<template>
  <div class="content">
    <el-badge :value="notificationNum" class="item"/>
    <el-row type="flex" justify="left" align="middle">
      <el-image v-if="imgSrc !== ''" :src="imgSrc" alt="加载失败" :preview-src-list="[imgSrc]" style="width:24px;height:24px;margin:6px;"></el-image>
      <div>{{ this.contentMsg }}</div>
    </el-row>
    <el-row type="flex" justify="space-between" align="middle">
      <div>{{ this.timeMsg }}</div>
      <el-button @click="clearAll" type="warning" round size="mini">全部关闭</el-button>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "NotificationContentMsg",
  props: {
    notificationNum: {
      type: Number,
      default: 1,
    },
    contentMsg: {
      type: String,
      default: "",
    },
    timeMsg: {
      type: String,
      default: "",
    },
    imgSrc: {
      type: String,
      default: '',
    }
  },
  methods: {
    clearAll() {
      this.$notify.closeAll();
    }
  }
}
</script>

<style scoped>
.content {
  width: 240px;
}

.item {
  position: absolute;
  left: 280px;
}
</style>